<template>
	<view class="deviceManagement">
		<!-- <f-navbar title="设备管理（维保）" :iconLeft="true" :isBack="true" @goBack="goBack" /> -->
		<view class="deviceManagement-content">
			<view v-if="deviceList.length > 0">
				<view class="ff-margin-12 ff-padding-15 ff-bg-fff ff-border-radius-10"
					v-for="(item, index) of deviceList" :key="index" @click="editDeviceClick(item)"
					@longpress="deleteClick(item)">
					<view class="ff-flex-between ff-align-items-one">
						<view>
							<view class="ff-font-16 ff-color-000 ff-font-weight-600 ff-margin-bottom-10">
								{{ item.deviceName }}
							</view>
							<view class="ff-font-14 ff-color-5C5F65">数量：{{ item.deviceNum }}</view>
						</view>
						<image class="deviceIcon"
							src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/device-right.png"
							alt="" />
					</view>
				</view>
				<view v-if="noData" class="ff-padding-bottom-70">
					<u-divider border-color="#909399" height="120" color="#909399" bg-color="#f5f5f5">没有更多了</u-divider>
				</view>
			</view>
			<f-noData v-else></f-noData>
		</view>
		<view class="deviceManagement-but"><u-button type="primary" @click="addStaffGo">添加设备</u-button></view>
		<u-back-top :scrollTop="scrollTop" top="200" mode="circle" :iconStyle="iconStyle"
			:customStyle="customstyle"></u-back-top>
		<!-- -----------------------------弹框区------------------------------ -->
		<u-toast ref="uToast" />

		<f-loading ref="loading" />
		<u-modal v-model="locationDelete" @confirm="deleteConfirm" title="温馨提示" show-cancel-button="true"
			:content-style="{ 'line-height': '1.5' }" :content="deleteContent" />
	</view>
</template>

<script>
	export default {
		name: 'deviceManagement',
		data() {
			return {
				locationDelete: false, // 删除弹框的显/隐
				deleteContent: '', // 删除弹框提示语
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#FFFFFF'
				},
				customstyle: {
					background: '#3B83FE'
				},
				// 左滑删除
				deviceOptions: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}],
				deleteId: '', // 删除id
				deviceList: [], // 设备列表
				params: {
					current: 1,
					size: 12
				},
				noData: false // 暂时没有更多数据state
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onLoad() {
			this.getDeviceList(); // 获取设备列表数据
		},
		onShow() {
			uni.$on("getlist", () => {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 1000,
				});
				this.params.current = 1
				this.getDeviceList(); // 获取设备列表数据
			})
		},
		onUnload() {
			// 清除监听
			uni.$off('getlist');
		},
		// 上拉加载
		onReachBottom() {
			this.params.current++;
			this.getDeviceList(); // 获取设备列表数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			let that = this;
			that.params.current = 1;
			that.getDeviceList(); // 获取设备列表数据
			setTimeout(() => {
				that.$refs.uToast.show({
					title: '刷新成功',
					type: 'success'
				});
				uni.stopPullDownRefresh(); // 停止刷新
			}, 100);
		},
		methods: {
			// 返回首页
			goBack() {
				this.$pageJump.reLaunch('/pages/maintenance/mechanism/Maintenance');
			},
			// 获取设备列表数据
			async getDeviceList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: '/serviceOrg/pageDevice',
					data: this.params
				});
				// console.log('获取设备列表数据-------', data);
				if (data.code == 200) {
					const infoList = data.data.records;
					if (infoList.length == 0 && this.params.current == 1) {
						// console.log('首次加载没数据');
						this.noData = false;
						this.deviceList = [];
					} else if (infoList.length < 8 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = true;
						this.deviceList = infoList;
					} else if (infoList.length !== 0 && this.params.current == 1) {
						// console.log('首次加载有数据');
						this.noData = false;
						this.deviceList = infoList;
					} else if (infoList.length !== 0 && this.params.current > 1) {
						// console.log('上拉加载更多数据');
						this.noData = false;
						this.deviceList = this.deviceList.concat(infoList);
					} else if (infoList.length == 0 && this.params.current > 1) {
						// console.log('上拉加载没有更多数据了');
						this.noData = true;
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 删除设备
			deleteClick(item) {
				this.deleteId = item.deviceId;
				this.deleteContent = `您确定要删除设备${item.deviceName}吗？`;
				this.locationDelete = true;
			},
			// 删除设备-----确定操作
			deleteConfirm() {
				this.$refs.loading.openLoading('设备删除中···'); // 打开loading动画
				this.$http.post({
					url: `/serviceOrg/device/del/${this.deleteId}/v2`
				}).then(res => {
					// console.log('删除设备返回的结果-----', res);
					if (res.code == 200) {
						this.$refs.uToast.show({
							title: '删除成功！',
							type: 'success'
						});
						this.params.current = 1;
						this.getDeviceList(); // 获取设备列表数据
						uni.pageScrollTo({
							scrollTop: 0,
							duration: 1000,
						});
					} else {
						this.$refs.uToast.show({
							title: '删除失败，请重新操作！',
							type: 'error'
						});
					}
				});
				this.$refs.loading.closeLoading(); // 关闭loading动画
			},
			// 跳转新增设备的页面
			addStaffGo() {
				this.$pageJump.navigateTo('/pages/maintenance/mechanism/home/components/deviceManagement/addDevice');
			},
			// 编辑设备
			editDeviceClick(item) {
				this.$pageJump.navigateTo(
					'/pages/maintenance/mechanism/home/components/deviceManagement/addDevice?deviceId=' + item.deviceId
				);
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	.deviceManagement {
		.deviceIcon {
			width: 50rpx;
			height: 50rpx;
		}

		&-but {
			padding-bottom: env(safe-area-inset-bottom); // 针对iphone xr等系列的刘海底部屏幕做的适配
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #ffffff;

			/deep/.u-size-default {
				height: 100rpx !important;
				line-height: 100rpx !important;
			}
		}
	}
</style>